<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="个人中心" left-arrow @click-left="$router.back()"/>
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell title="姓名" :value="user.user_name" @click="isEditNameShow=true" is-link />

    <van-cell title="手机号"  :value="user.phonenumber" is-link @click="isEditPhone=true" />

    <van-cell title="单位" :value="user.department"  is-link @click="isEditDepartment=true" />

    <van-cell title="密码"  is-link @click="isChangePwd=true" />
    <!-- /个人信息 -->


    <!-- 编辑姓名弹框-->
    <van-popup v-model="isEditNameShow" position="bottom" style="height:100%">
      <!-- v-model只能使用一次，如果多个数据需要保持同步使用.sync -->
      <update-name :user="user" v-model="user.user_name" @close="isEditNameShow=false" />
    </van-popup>
    <!-- 编辑姓名弹框结束-->

    <!-- 编辑手机号-->
    <van-popup v-model="isEditPhone" position="bottom" style="height:100%">
      <update-gender :user="user" v-model="user.phonenumber" @close="isEditPhone=false" />
    </van-popup>


  <!-- 编辑单位-->
    <van-popup v-model="isEditDepartment" position="bottom" style="height:100%">
      <update-birthday :user="user" v-model="user.department" @close="isEditDepartment=false" />
    </van-popup>

  <!-- 修改密码-->
    <van-popup v-model="isChangePwd" position="bottom" style="height:100%">
      <update-photo  @close="isChangePwd=false" />
    </van-popup>

  </div>
</template>

<script>
import { getCurrentUser } from '@/api/user'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday'
import UpdatePhoto from './components/update-photo'
export default {
  name: 'UserProfile',
  components: {UpdateName,UpdateGender,UpdateBirthday,UpdatePhoto},
  props: {},
  data() {
    return {
      user: {},
      isEditNameShow: false,//编辑姓名显示状态
      isEditPhone: false, //编辑手机号显示状态
      isEditDepartment: false,//编辑单位
      isChangePwd:false,//修改密码
    }
  },
  computed: {},
  watch: {},
  created() {
    this.loadUserProfile()
  },
  mounted () {},
  methods: {
    async loadUserProfile() {
      const { data } = await getCurrentUser()
      this.user = data.data
    }
  }
}
</script>

<style scoped lang="less">
.page-nav-bar{
  background: url("/img/bg_person.png") no-repeat;
  /deep/ .van-nav-bar__title{
        color: white;
    }

    /deep/.van-icon{
        color: white;
    }
}
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
}
.van-popup{
  background-color: #f5f7f9;
}
</style>